<template>
	<view class="container">
		<view class="top-box">
			<view class="top-add" @tap="goPublish">+</view>
		</view>
		
		<view class="trends-box" v-if="!isEmpty">
			<view class="trends-list">
				<view class="trends-item" v-for="(trends, index) in trendsList" :key="trends.trendsId">
					<view class="trends-one">
						<view class="trends-avatar" @tap="goTeacherZoneIndex">
							<image :src="trends.userAvatar"></image>
						</view>
						<view class="trends-name-time">
							<view class="trends-name">{{trends.collegeName}}</view>
							<view class="trends-time">{{trends.trendsCreatedShow}}</view>
						</view>
						<view class="del-icon" v-if="reqData.isSelf == 1">
							<image @tap="showMask(trends.trendsId, index)" src="../../static/images/del.png"></image>
						</view>
					</view>
					<view class="trends-two">{{trends.trendsContent}}</view>
					<view v-if="trends.trendsType == 2" class="trends-three">
						<video @fullscreenchange="videoFullScreenChange" @tap="fullScreenVideo(index)" :id="'trendsVideo' + index" v-if="trends.isPlay" :src="trends.trendsVideoUrl" loop autoplay :controls="false" direction="0"></video>
						<view class="video-cover" v-else>
							<image class="video-cover-bg" :src="trends.trendsCoverPicture" mode="aspectFit"></image>
							<image src="../../static/images/play.png" class="video-cover-play"></image>
						</view>
					</view>
					<view v-else class="trends-three" :class="{'thrends-three-f': trends.trendsPictures.length == 4}">
						<block v-if="trends.trendsPictures.length == 1">
							<view @tap="trendsImgPreview(index, photoIndex)" v-for="(photo, photoIndex) in trends.trendsPictures" :key="photoIndex">
								<image mode="widthFix" :src="photo"></image>
							</view>
						</block>
						<block v-else>
							<view @tap="trendsImgPreview(index, photoIndex)" class="trends-three-item" v-for="(photo, photoIndex) in trends.trendsPictures"
							 :key="photoIndex">
								<image mode="aspectFill" :src="photo"></image>
							</view>
						</block>
					</view>
					<view class="trends-four">
						<view class="trends-four-left" :animation="trends.trendsAnimationData">
							<view class="thumbs-up-box" @tap="doThumbsUp(index)">
								<view class="thumbs-up-icon">
									<image src="../../static/images/thumbs_up.png"></image>
								</view>
								<view class="thumbs-up-label">点赞</view>
							</view>
							<view class="comment-box" @tap="showCommentInput($event, index)">
								<view class="comment-icon">
									<image src="../../static/images/comment.png"></image>
								</view>
								<view class="comment-label">评论</view>
							</view>
						</view>
						<view class="trends-four-right" @tap="showThumbsUpComment(index)">
							<image src="../../static/images/more_operate.png"></image>
						</view>
					</view>
					<view class="trends-five" v-show="trends.trendsIsShowThumbsUpComment">
						<view class="thumbs-up-list" v-show="trends.trendsIsShowThumbsUp">
							<view class="thumbs-up-list-icon">
								<image src="../../static/images/thumbs_up_a.png"></image>
							</view>
							<view class="thumbs-up-list-item" v-for="(thumbsUp, thumbsUpIndex) in trends.trendsThumbsUpList" :key="thumbsUp.thumbsUpId">{{thumbsUp.fromUserShortName}}</view>
						</view>
						<view class="thrends-five-line" v-show="trends.trendsIsShowLine"></view>
						<view class="comment-list" v-show="trends.trendsIsShowComment">
							<view class="comment-list-item" v-for="(comment, commentIndex) in trends.trendsCommentList" :key="comment.commentId">
								<view class="comment-list-item-name" v-if="comment.commentType < 2">
								<text class="comment-name" @tap="showCommentInput($event, index, comment.fromUserId, comment.fromUserShortName)">{{comment.fromUserShortName}}</text>：{{comment.commentContent}}
								</view>
								<view class="comment-list-item-name" v-else>
									<text class="comment-name" @tap="showCommentInput($event, index, comment.fromUserId, comment.fromUserShortName)">{{comment.fromUserShortName}}</text>
									<text class="reply-label">回复</text>
									<text class="comment-name" @tap="showCommentInput($event, index, comment.toUserId, comment.toUserShortName)">{{comment.toUserShortName}}</text>：
									{{comment.commentContent}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="no-trends-box" v-if="isEmpty">
			<view class="no-trends-img">
				<image src="../../static/images/no_trends.png"></image>
			</view>
			<view class="no-trends-label">暂无动态</view>
		</view>
		
		<view class="send-msg-box" v-show="isShowSendBox">
			<view class="send-input-box">
				<input :placeholder="commentPlaceholder" class="uni-input" cursor-spacing="18" v-model="commentFormData.content" :focus="isfocus" />
			</view>
			<view class="send-btn" @tap="doSendMsg">发送</view>
		</view>
		
		<view class="mask" v-show="isShowMask"></view>
		<view class="mask-box" v-show="isShowMask">
			<view class="mask-content-box">
				<view class="mask-content-title">确定要删除这条说说吗？</view>
				<view class="mask-btn-box">
					<view class="mask-btn btn-cancel" @tap="hideMask">取消</view>
					<view class="mask-btn btn-confirm" @tap="delTrends">确定</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { http, showToastMsg } from '../../utils'
	
	export default {
		data() {
			return {
				sendMsg: '',
				isfocus: false,
				isShowSendBox: false,
				currentCommentIndex: -1,
				trendsList: [],
				animation: {},
				msgWidth: 0,
				reqData: {
					curPage: 1,
					isSelf: 1
				},
				thumbsUpFormData: {
					trendsId: 0
				},
				commentFormData: {
					trendsId: 0,
					toId: 0,
					content: ''
				},
				isLoading: false,
				isEmpty: false,
				trendsItemTopList: [],
				curScrollIndex: 0,
				distance: 0,
				commentPlaceholder: '',
				videoContext: null,
				isFullScreen: false,
				isShowMask: false,
				delId: 0,
				delIndex: -1
			}
		},

		onLoad(options) {
			if (options.id) {
				this.reqData.uid = options.id
				this.reqData.isSelf = 2
			}
			this.animation = uni.createAnimation({
				duration: 100,
			  timingFunction: 'ease'
			})
			this.fetchTrendsData()
		},

		onReachBottom() {
			if (this.isLoading) {
				return false
			}
			this.isLoading = true
			this.fetchTrendsData()
		},
		
		onPageScroll(e) {
			const that = this
			let scrollTop = e.scrollTop
			if (scrollTop <= 100) {
				that.pauseVideo(that.curScrollIndex)
				that.curScrollIndex = 0
				that.playVideo(that.curScrollIndex)
			}
			if (scrollTop >= that.distance) { // 页面向上滚动
				if (that.curScrollIndex + 1 < that.trendsItemTopList.length && scrollTop >= that.trendsItemTopList[that.curScrollIndex] + 200) {
					that.pauseVideo(that.curScrollIndex++)
					that.playVideo(that.curScrollIndex)
				}
			} else { // 页面向下滚动
				if (that.distance - scrollTop < 10) {
					return
				}
				if (that.curScrollIndex - 1 > 0 && scrollTop < that.trendsItemTopList[that.curScrollIndex - 1]) {
					that.pauseVideo(that.curScrollIndex--)
					that.playVideo(that.curScrollIndex)
				}
			}
			that.distance = scrollTop
		},

		methods: {
			
			showMask(id, index) {
				this.delId = id
				this.delIndex = index
				this.isShowMask = true
			},
			
			hideMask() {
				this.delId = 0
				this.delIndex = -1
				this.isShowMask = false
			},
			
			fullScreenVideo(i) {
				this.videoContext = uni.createVideoContext('trendsVideo' + i)
				if (!this.isFullScreen) {
					this.videoContext.requestFullScreen()
				} else {
					this.videoContext.exitFullScreen()
				}
			},
			
			videoFullScreenChange() {
				this.isFullScreen = !this.isFullScreen
			},
			
			playVideo(i) {
				this.trendsList[i].isPlay = true
			},
			
			pauseVideo(i) {
				this.trendsList[i].isPlay = false
			},
			
			goPublish() {
				uni.navigateTo({
					url: '/pages/publish/publish'
				})
			},
			
			delTrends() {
				const that = this
				http('/trends/del', {trendsId: that.delId}).then(res => {
					that.hideMask()
					if (res.code == 20000) {
						that.trendsList = that.trendsList.splice(that.delIndex, 1)
					}
				})
			},

			trendsImgPreview(i, j) {
				const that = this
				uni.previewImage({
					current: j,
					urls: that.trendsList[i].trendsPictures
				})
			},
			
			showThumbsUpComment(i) {
				this.commentFormData.toId = 0
				this.commentPlaceholder = ''
				let w = this.msgWidth > 0 ? 0 : 264
				this.msgWidth = w
				this.animation.width(w+'rpx').step()
				this.trendsList[i].trendsAnimationData = this.animation.export()
			},
			
			doThumbsUp(i) {
				const that = this
				that.thumbsUpFormData.trendsId = that.trendsList[i].trendsId
				that.trendsList[i].trendsIsShowThumbsUpComment = true
				that.trendsList[i].trendsIsShowThumbsUp = true
				if (that.trendsList[i].trendsIsShowComment) {
					that.trendsList[i].trendsIsShowLine = true
				}
				http('/thumbs-up/create', that.thumbsUpFormData).then(res => {
					if (res.code == 20000) {
						that.trendsList[i].trendsThumbsUpList.push(res.data)
					}
				})
			},
			
			showCommentInput(e, i, toId, toName) {
				this.commentFormData.content = ''
				if (toId > 0) {
					this.commentFormData.toId = toId
					this.commentPlaceholder = '回复' + toName + '：'
				} else {
					this.showThumbsUpComment(i)
				}
				this.currentCommentIndex = i
				this.isShowSendBox = true
				this.isfocus = true
			},
			
			doNotSend() {
				this.isfocus = false
				this.currentCommentIndex = -1
				this.isShowSendBox = false
			},
			
			doSendMsg() {
				const that = this
				if (that.commentFormData.content.length > 0) {
					let index = that.currentCommentIndex
					that.commentFormData.trendsId = that.trendsList[index].trendsId
					that.trendsList[index].trendsIsShowComment = true
					that.trendsList[index].trendsIsShowThumbsUpComment = true
					if (that.trendsList[index].trendsIsShowThumbsUp) {
						that.trendsList[index].trendsIsShowLine = true
					}
					http('/comment/create', that.commentFormData).then(res => {
						if (res.code == 20000) {
							that.trendsList[index].trendsCommentList.push(res.data)
						}
					})
				}
				that.doNotSend()
			},
			
			fetchTrendsData() {
				const that = this
				if (that.reqData.curPage == 1) {
					that.trendsList = []
					let cacheData = http('/trends/list', that.reqData, {isCache: true})
					if (cacheData && cacheData.data && cacheData.data.list) {
						that.trendsList = that.trendsList.concat(cacheData.data.list)
					}
					
					setTimeout(function() {
						http('/trends/list', that.reqData, {isSetCache: true}).then(res => {
							if (res.code == 20000) {
								let data = res.data.list
								if (data.length > 0) {
									that.isLoading = false
									that.trendsList = []
									that.reqData.curPage++
									for (let i = 0; i < data.length; i++) {
										if (data[i].userAvatar.length <= 0) {
											data[i].userAvatar = '../../static/images/user_default.png'
										}
										if (i == 0) {
											data[i].isPlay = true
										} else {
											data[i].isPlay = false
										}
										that.trendsList.push(data[i])
									}
									that.$nextTick(function(){
										that.trendsItemTopList = []
										uni.createSelectorQuery().selectAll('.trends-item').boundingClientRect().exec(data => {
											data[0].forEach(item => {
												that.trendsItemTopList.push(item.top)
											})
										})
									})
								} else {
									that.isEmpty = true
								}
							} else {
								that.trendsList = []
								that.isEmpty = true
							}
						})
					}, 1000)
				} else {
					http('/trends/list', that.reqData).then(res => {
						if (res.code == 20000) {
							let data = res.data.list
							if (data.length > 0) {
								that.isLoading = false
								that.reqData.curPage++
								for (let i = 0; i < data.length; i++) {
									if (data[i].userAvatar.length <= 0) {
										data[i].userAvatar = '../../static/images/user_default.png'
									}
									data[i].isPlay = false
									that.trendsList.push(data[i])
								}
								that.$nextTick(function(){
									that.trendsItemTopList = []
									uni.createSelectorQuery().selectAll('.trends-item').boundingClientRect().exec(data => {
										data[0].forEach(item => {
											that.trendsItemTopList.push(item.top + that.distance)
										})
									})
								})
							} else {
								that.loadingText = '就这么多了'
							}
						}
					})
				}
			}

		}
	}
</script>

<style>
	.container {
		width: 750rpx;
		height: auto;
	}
	
	.no-trends-box {
		width: 750rpx;
		height: auto;
		margin-top: 300rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 200rpx;
	}
	
	.no-trends-img image {
		width: 300rpx;
		height: 300rpx;
	}
	
	.no-trends-label {
		font-size: 36rpx;
		color: #666666;
		margin-top: 10rpx;
	}
	
	.del-icon {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		margin-bottom: 36rpx;
	}
	
	.del-icon image {
		width: 24rpx;
		height: 24rpx;
	}

	.top-box {
		width: 750rpx;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		background-color: #45d6b7;
	}

	.top-add {
		font-size: 60rpx;
		font-weight: 900;
		color: #ffffff;
		margin-right: 30rpx;
	}

	.trends-box {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 300rpx;
	}

	.trends-title {
		width: 700rpx;
		font-size: 30rpx;
		font-weight: bold;
		margin-top: 30rpx;
	}

	.trends-list {
		width: 660rpx;
	}

	.trends-item {
		margin-top: 50rpx;
	}

	.trends-one {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.trends-name-time {
		margin-left: 20rpx;
	}

	.trends-name {
		white-space: nowrap;
		font-size: 24rpx;
	}

	.trends-time {
		white-space: nowrap;
		font-size: 20rpx;
		color: #999999;
		height: 46rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.trends-avatar image {
		width: 88rpx;
		height: 88rpx;
		border-radius: 44rpx;
	}

	.trends-two {
		width: 100%;
		font-size: 30rpx;
		margin-top: 10rpx;
	}

	.trends-three {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}

	.thrends-three-f {
		width: 440rpx !important;
	}

	.trends-three-item {
		width: 210rpx;
	}

	.trends-three-item image {
		width: 204rpx;
		height: 204rpx;
	}

	.trends-four {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	.trends-four-left {
		width: 0;
		position: relative;
		height: 68rpx;
		background-color: #212f42;
		color: #ffffff;
		font-size: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		align-items: center;
		border-radius: 10rpx;
		margin-right: 20rpx;
		z-index: 1;
	}

	.thumbs-up-box {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.thumbs-up-icon {
		width: 36rpx;
	}

	.thumbs-up-icon image {
		width: 28rpx;
		height: 28rpx;
	}

	.comment-box {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.comment-icon {
		width: 36rpx;
		margin-top: 8rpx;
	}

	.trends-four-right {
		z-index: 10;
		margin-top: 14rpx;
	}

	.comment-icon image {
		width: 28rpx;
		height: 28rpx;
	}

	.trends-four-right image {
		width: 36rpx;
		height: 36rpx;
	}

	.trends-five {
		width: 100%;
		height: auto;
		background-color: #f5f5f5;
		border-radius: 10rpx;
		padding-top: 20rpx;
		padding-bottom: 30rpx;
	}

	.thrends-five-line {
		width: 100;
		height: 2rpx;
		background-color: #dddddd;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.thumbs-up-list {
		width: 620rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		margin-left: 20rpx;
	}

	.thumbs-up-list-item {
		margin-left: 20rpx;
		font-size: 24rpx;
		color: #ff8806;
	}

	.thumbs-up-list-icon image {
		width: 24rpx;
		height: 24rpx;
	}

	.comment-list {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.comment-list-item {
		width: 600rpx;
		display: flex;
		flex-direction: row;
		margin-top: 16rpx;
	}

	.comment-list-item-name {
		font-size: 24rpx;
		color: #333333;
	}

	.comment-list-item-msg {
		width: 500rpx;
		font-size: 24rpx;
		word-wrap: break-word;
	}

	.send-msg-box {
		width: 750rpx;
		height: 98rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(0, 0, 0, 0.35);
		z-index: 10000;
		background-color: #f5f5f5;
	}

	.send-input-box {
		width: 560rpx;
		height: 60rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 20rpx;
	}

	.send-input-box input {
		font-size: 24rpx;
	}

	.send-btn {
		width: 120rpx;
		height: 60rpx;
		background-image: linear-gradient(90deg, #ff8806 0%, #fbae2b 100%), linear-gradient(#4685f8, #4685f8);
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		color: #ffffff;
		margin-left: 20rpx;
	}
	
	.reply-label {
		white-space: nowrap;
	}
	
	.comment-name {
		white-space: nowrap;
		color: #ff8806 !important;
	}
	
	.comment-item-name-left {
		white-space: nowrap;
	}
	
	.video-cover {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.video-cover-play {
		width: 120rpx;
		height: 120rpx;
		z-index: 2;
		position: absolute;
	}
	
	.video-cover-bg {
		z-index: 1;
	}
	
	.mask {
		width: 750rpx;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		background-color: #000000;
		opacity: 0.5;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.mask-box {
		width: 750rpx;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 101;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.mask-content-box {
		width: 626rpx;
		height: 360rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 20rpx;
	}
	
	.mask-content-title {
		color: #333333;
		font-size: 36rpx;
		margin-top: 98rpx;
		border-radius: 20rpx;
	}
	
	.mask-btn-box {
		margin-top: 62rpx;
		width: 456rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.mask-btn {
		width: 200rpx;
		height: 70rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 36rpx;
	}
	
	.btn-cancel {
		background-color: #f3f2f0;
		color: #333333;
	}
	
	.btn-confirm {
		background-color: #45d6b7;
		color: #ffffff;
	}
</style>
